/**
 * @description
 * @author vision <vision.shi@tianjishuju.com>
 * @license www.tianjishuju.com/license
 */
import PropTypes from 'prop-types';
import PureRenderMixin from "react-addons-pure-render-mixin"
import React, {Component} from 'react';
// import HighchartMore from 'highcharts/highcharts-more.src';
import Highchart3d from 'highcharts/highcharts-3d.src';

const Highcharts = require('highcharts/highcharts.src');
// require('highcharts/modules/exporting')(Highcharts);
// require('highcharts/modules/offline-exporting')(Highcharts);

import T from 'utils/T';

// HighchartMore(Highcharts);
Highchart3d(Highcharts);

@T.decorator.propTypes({
	height: PropTypes.number.isRequired
})
export default class HighChart extends Component {
	static defaultProps = {
		height: 0
	};

	constructor(props) {
		super(props);

		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
		this.chart = null;
	}

	componentDidMount() {
		this.drawChart();
	}

	/**
	 * 刷新数据
	 * @param nextProps
	 */
	componentWillReceiveProps(nextProps) {
		if (nextProps.option) {
			this.drawChart();
			this.update();
		}
	}

	componentDidUpdate(nextProps) {
		if (nextProps.option) {
			this.drawChart();
			this.update();
		}
	}

	getOptions() {
		return Object.assign(this.buildBaseOptions(), {
			credits: {
				enabled: false
			},
			exporting: {
				enabled: false
			}
		}, this.buildChartOptions());
	}

	buildBaseOptions() {
		return {};
	}

	buildChartOptions() {
		return {};
	}

	drawChart() {
		if (this.wrapper) {
			this.chart = Highcharts.chart(this.wrapper, this.getOptions());
			const self = this;
			$('#chart-info-box').resize(function () {
				self.chart.reflow();
			});
		}
	}

	update() {
		this.chart.update(this.getOptions());
	}

	render() {
		let height = this.props.height;

		return (
			<div className="chart">
				<div className="chart-content"
					 style={{width: '100%', height: height}}
					 ref={wrapper => (this.wrapper = wrapper)}
				/>
			</div>
		)
	}
}
